<template>
  <div class="product-container">
    <el-row>
      <el-col :span="6">
        <img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/3417956174/O1CN01ETTTRE1vTjrvv5ltm_!!3417956174.jpg_430x430q90.jpg" alt="">
      </el-col>
      <el-col :span="14">
        <div class="desc">
          <p class="title">马丁靴女鞋秋季2019年潮鞋新款秋鞋秋冬季加绒百搭英伦风短靴冬鞋</p>
          <div class="price-container">
            <div>
              <span class="price">价格</span>
              <span class="yprice"><del>￥326.00</del></span><br>
            </div>
            <div>
              <span class="price">促销价</span>
              <span class="surprise">￥163.00</span>
            </div>
          </div>
          <div class="mail-site border-bottom">
            <span class="price">运费</span>
            <span class="yprice">浙江温州至 北京 快递: 0.00</span>
          </div>
          <div class="sales border-bottom">
            <span class="sales1 border-right">月销量:<span style="color:red;font-size:13px;font-weight:bold">2.5万+</span></span>
            <span class="sales1 border-right">累计评价<span style="color:red;font-size:13px;font-weight:bold">4961</span></span>
            <span class="sales1">送天猫积分<span style="color:green;font-size:13px;font-weight:bold">84</span></span>
          </div>
          <div class="size">
            <span class="price">尺码</span>
            <div class="size-container">
              <span @click.self="msize">1 <i class="el-icon-check select"></i> </span>
              <span @click.self="msize">2 <i class="el-icon-check select"></i> </span>
              <span @click.self="msize">3 <i class="el-icon-check select"></i> </span>
            </div>
          </div>
          <div>
            <span>颜色分类</span>
            <div class="radio">
              <el-radio v-model="radio" label="红色"></el-radio>
              <el-radio v-model="radio" label="蓝色"></el-radio>
              <el-radio v-model="radio" label="白色"></el-radio>
              <el-radio v-model="radio" label="灰色"></el-radio>
              <el-radio v-model="radio" label="黑色"></el-radio>
            </div>
          </div>
          <div class="amount">
            <span class="price">数量</span>
            <div class="add">
              <el-input-number v-model="num" size="mini" :min="1" :max="10" @change="mchange">1</el-input-number>
              <span>库存44563679件</span>
            </div>
          </div>
          <div>
            <el-button type="danger" @click="buy">立即购买</el-button>
            <el-button type="danger" @click="addShopcart">加入购物车</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="right">
          <p class="right-desc">----看了又看----</p>
          <ul>
            <li>
              <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg" alt="">
            </li>
            <li>
              <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg" alt="">
            </li>
            <li>
              <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg" alt="">
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '红色',
      num: 1,
      size: '',
      select: ''
    }
  },
  methods: {
    async buy () {
      const { status, data } = await this.$axios.get('/users/getUser')
      if (status === 200 && data.code === -1) {
        this.$alert('请登录')
      } else {
        this.$alert('这里的是实际的支付流程，这里就不做演示了')
      }
    },
    async addShopcart () {
      const { status, data } = await this.$axios.get('/users/getUser')
      if (status === 200 && data.code === -1) {
        this.$alert('请登录')
      } else {
        location.href = "/shopcart"
      }
    },
    mchange (v) {
      this.num = v
    },
    msize (v) {
      const dom = document.getElementsByClassName('selected')
      if (dom[0]) {
        dom[0].classList.remove('selected')
      }
      v.target.classList.add('selected')
    }
  }
}
</script>

<style lang="stylus" scoped>
.product-container
  margin 20px 0
  img
    width 100%
  .desc
    padding 5px 0 0 20px
    text-indent 5px
    .amount
      margin 20px 0
      .add
        padding 0 5px 5px
        text-indent 0
        display inline-block
        vertical-align top
    .yprice
      color #000
    .price
      width 50px
    span
      font-size 12px
      color rgb(153,153,153)
      display inline-block
    .title
      margin-bottom 15px
      font-size 18px
      font-weight 600
      color #000
    .mail-site
      padding 20px 0
    .size
      margin 20px 0
      .size-container
        width 90%
        display inline-block
        vertical-align top
        text-indent 0
        span
          width 30px
          height 30px
          display inline-block
          text-align center
          line-height 30px
          border 2px solid rgb(184,184,184)
          margin 0 5px 5px
          position relative
          cursor pointer
          .select
            vertical-align bottom
            position absolute
            font-size 1px
            bottom 0
            right 0
            background #fff
            color #fff
          &:hover
            border 2px solid red
        .selected
          border 2px solid red
          .select
            background red
    .sales
      display flex
      .sales1
        flex-grow 1
        text-align center
        margin 10px 0
    .price-container
      background rgb(229,228,228)
      padding 10px 0
      margin 10px 0
      .yprice
        color #000
      .surprise
        font-size 20px
        color red
        font-weight bold
    .radio
      width 90%
      display inline-block
    .radio >>> .is-checked
      color red
      .el-radio__inner
        color red
  .right
    padding 20px
    .right-desc
      color rgb(153,153,153)
      text-align center
    img
      width 100%
</style>
